<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     #div1{
	    width:500px; height:300px; border:solid 1px red;
        position:relative; top:100px; left:300px;
	 }
	 #div2{
	    width:100px; height:100px; border:solid 1px yellow;
		margin-top:100px; margin-left:100px;
	 }
	 #div3{
	    width:80px; height:80px; border:solid 1px blue;
		position:absolute; left:250px;
	 }
	 #div4{
	    margin-top:2000px;
	 }
	 button{
	    position:fixed;
	 }
  </style>
  <script src="jQuery复习/jquery-3.3.1.js"></script>
 </head>
 <body>
    <button>确定</button>
    <div id="div1">
	   <div id="div2"></div>
       <div id="div3"></div>
	</div>
	<div id="div4"></div>
 </body>
  <script>
     console.log($("#div1").offset());
	 console.log($("#div2").offset());

	 console.log($("#div2").position());
	 console.log($("#div3").position());
     
	 //获取滚动条滚动的距离
	 $("button").click(function(){
	    console.log($(document).scrollTop());
	 });
  </script>
</html>
